<template>
  <div class="knowledge-mark" v-if="queryMode == 2">
    <div v-if="type == 1">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item
          class="mark-item"
          :name="item.id"
          v-for="(item, index) in tableData"
          :key="item.id"
        >
          <template slot="title">
            <span class="sheng" :title="item.name">
              {{ index + 1 + '  ' + item.name }}
            </span>
          </template>
          <div
            class="chapter-item"
            v-for="(v, idx) in item.childList"
            :key="v.id"
          >
            <div
              :class="markClass(m)"
              v-for="(m, i) in v.childList"
              :key="m.id"
            >
              <span :title="m.sysKnowledge.name" @click="handleClick(m)">
                {{ index + 1 }}-{{ idx + 1 }}-{{ i + 1 }}
              </span>
              <el-checkbox v-model="m.mark" @change="handldMark(m)"
                >标记</el-checkbox
              >
            </div>
          </div>
          <div style="clear: both"></div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div v-else>
      <div :class="markClass(m)" v-for="(m, i) in markData" :key="m.id">
        <span :title="m.sysKnowledge.name" @click="handleClick(m)">
          {{ i + 1 }}
        </span>
        <el-checkbox v-model="m.mark" @change="handldMark(m)">标记</el-checkbox>
      </div>
      <div style="clear: both"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: false,
      tableData: [],
      activeName: '',
      markData: [],
      type: 1,
      queryMode: this.$route.query.queryMode,
    }
  },
  props: ['knowledgeData', 'courseId', 'knowledgeId'],
  computed: {
    markClass() {
      return (m) => {
        return [
          'knowledge-item',
          { read: m.isRead != 0 },
          { active: m.knowledgeId == this.knowledgeId },
        ]
      }
    },
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        this.handleRead()
      },
    },
  },
  methods: {
    //已读
    async handleRead() {
      if (!this.$store.getters.userId) return
      let { type } = this.knowledgeData
      this.type = type
      let obj = {
        chapterId: 0,
        courseId: 0,
        courseType: type,
        knowledgeId: this.knowledgeId,
        isRead: 1,
      }
      await this.$store.dispatch('addSysChapterMark', obj)
      this.getList()
    },
    //获取阅读标记
    async getList() {
      let res = await this.$store.dispatch('querySysKnowledgeRelation', {
        courseId: this.courseId,
        page: 1,
        limit: 9999,
      })
      this.markData = JSON.parse(JSON.stringify(res.data))
      this.markData.forEach((n) => {
        n.mark = n.mark == 2
      })
      this.init()
    },
    //初始化数据
    async init() {
      if (this.type != 1) return
      let obj = {
        page: 1,
        limit: 9999,
        pid: 0,
        courseId: this.courseId,
      }
      let res = await this.$store.dispatch('queryOpenApiSysCourseChapter', obj)
      this.tableData = res.data
      this.tableData.forEach((item) => {
        item.childList.forEach((v) => {
          let arr = this.markData.filter((m) => m.chapterId == v.id)
          v.childList = arr
          v.childList.forEach((m) => {
            if (m.knowledgeId == this.knowledgeId) {
              this.activeName = item.id
            }
          })
        })
      })
    },
    //添加|删除标记
    handldMark(row) {
      let obj = {
        chapterId: 0,
        courseId: 0,
        courseType: row.type,
        knowledgeId: row.knowledgeId,
        mark: row.mark ? 2 : 1,
        markType: '1',
      }
      this.$store.dispatch('addSysChapterMark', obj)
    },
    handleClick(row) {
      let name = 'knowdedge-detail'
      switch (this.type) {
        case '1':
          name = 'knowdedge-detail'
          break
        case '2':
          name = 'specialty-knowdedge'
          break
        case '3':
          name = 'arms-knowdedge-home'
          break
        case '4':
          name = 'topic-knowdedge-detail'
          break
        default:
          name = 'knowdedge-detail'
      }
      this.$router.push({
        name,
        query: { id: row.knowledgeId, queryMode: this.queryMode },
      })
    },
  },
}
</script>
<style scoped lang="scss">
.knowledge-mark {
  padding: 10px 20px;
  box-sizing: border-box;
  background: #f8f8f8;
  border: 1px solid #e6e6e6;
  margin-bottom: 20px;
  .knowledge-item {
    float: left;
    width: 48%;
    height: 40px;
    margin: 5px 1%;
    line-height: 40px;
    text-align: center;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    &.read {
      background: #eee;
    }
    &.active {
      color: #fff;
      background: #06a2c9;
      border-color: #06a2c9;
      .el-checkbox {
        color: #fff;
      }
    }
    span {
      margin-right: 15px;
    }
  }
}
</style>
<style scoped>
.knowledge-mark >>> .el-collapse-item__wrap,
.knowledge-mark >>> .el-collapse-item__header {
  background-color: transparent;
}
</style>